<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01—初体验</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <h2 class="page-header">Promise 初体验</h2>
    <button class="btn btn-primary">点击抽奖</button>
  </div>


  <script>
    // 生成随机数
    // min  小数
    // max  大数
    // 顺序不能改变 有 bug
    // function rand(min,max) {
    //   return Math.ceil(Math.random() * ( max - min + 1 )) + min - 1 ; 
    // }

    // 顺序能改变
    // 逻辑:  两数差取绝对值, + 1 向下取整, 在加上最小值.
    function rand(a, b) {
      return Math.floor(Math.random() * (Math.abs(a - b) + 1)) + Math.min(a, b)
    }

    /**
     * 点击按钮, 2s 后显示是否中奖(30% 概率中奖)
     * 若中奖弹出 恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券
     * 若未中奖弹出 再接再历
     */

    // 获取元素对象
    const btn = document.querySelector('button');
    // 绑定点击事件
    btn.addEventListener('click', () => {

      // 定时器
      // setTimeout( () => {
      //   // 30% 概率
      //   // 获取从 1 - 100 的一个随机数
      //   let n = rand(1, 100);
      //   // 判断
      //   if( n <= 30 ) {
      //     alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券')
      //   }else {
      //     alert('再接再历')
      //   }
      // }, 2000)

      // Promise 形式实现
      // resolve  解决  函数类型的数据
      // reject   拒绝  函数类型的数据
      const p = new Promise((resolve, reject) => {
        setTimeout( () => {
          // 30% 概率
          // 获取从 1 - 100 的一个随机数
          let n = rand(1, 100);
          // 判断
          if( n <= 30 ) {
            resolve(n)     // 将 promise 对象的状态设置为 【成功】  
          }else {
            reject(n)      // 将 promise 对象的状态设置为 【失败】
          }
        }, 1000);
      });

      // 调用 then 方法
      // 第一个参数是成功时的回调
      // 第二个参数是失败时的回调
      p.then( (value)  =>  {
        alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券, 您的中奖数字为:'+  value)
      },  (reason)  =>  {
        alert('再接再历, 您的号码为:'+ reason)
      });
    })
  </script>
</body>
</html>